//base
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Form, Button } from '@tarojs/components'
import { connect } from '@tarojs/redux'
//less
import './index.less'
import { getsettlementMethod, getsettlementMethodNameShort, getunitMethod } from '../../../util/pagemethods'
import If from '../if'
import messagePush from '../../../util/messagePush'
import { getStorageSync } from '../../../crossplatform/apiservice/storage'

@connect(
  userinfo => ({ ...userinfo }),
  dispatch => ({})
)
class JobListItem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isiPhone: false
    }
  }
  componentWillMount() {
    //onLoad
    this.setState({
      isiPhone: getStorageSync('iPhone')
    })
  }

  componentDidMount() {
    //onready
  }

  componentWillUnmount() {
    //onUnload
  }

  componentWillReceiveProps(nextprops) {}

  bindClick = data => {
    this.props.bindClick && this.props.bindClick(data)
  }

  formSubmit = e => {
    let { formId } = e.detail
    const { openId, userId } = this.props.userinfo
    messagePush.insertFormId({ userId, formId, openId })
  }

  render() {
    const { landmarkName, barlevecurrent, data, showDate = false } = this.props
    const { isiPhone } = this.state
    return (
      <View className={`wrap-all ${isiPhone ? '' : 'wrap-all-false'}`}>
        <Form onSubmit={this.formSubmit} reportSubmit className="ad-imgs-item">
          <Button
            formType="submit"
            className={`single form-btn ${isiPhone ? '' : 'single-false'}`}
            onClick={this.bindClick.bind(this, data)}
          >
            <View className="singlewrap">
              <View className="titlewrap">
                <View className="title">{data.name}</View>
                <If visible={data.isFast == 1}>
                  <Image
                    className="icon"
                    src="https://imagesize.hrwork.com/sp/files/79cea29b-2cbb-4897-a5a7-4ae8b516c8f4.png"
                  />
                </If>
                <View className="midright">
                  <View className="price">{data.salary}</View>
                  <View className="unit">{getunitMethod(data.unitMethod, data.settlementMethod, data.type)}</View>
                </View>
              </View>

              {data.workPlace &&
                data.workPlace.length &&
                data.workPlace
                  .filter(e => {
                    return e.cityName.replace('市', '') == landmarkName
                  })
                  .map((datain, indexin) => {
                    return indexin == 0 ? (
                      <View className="sub-text" key={indexin}>
                        <Text className="area-text">{datain.addressSimple || datain.address}</Text>
                        <Text>{data.distance || ''}</Text>
                      </View>
                    ) : null
                  })}

              <View className="btmwrap">
                <View className="btmleft">
                  {data.workPlace &&
                    data.workPlace.length &&
                    data.workPlace
                      .filter((e, i) => {
                        return e.cityName == landmarkName
                      })
                      .map((datain, index) => {
                        return index == 0 ? (
                          <View className="tags" key={index}>
                            {datain.areaName || datain.cityName}
                          </View>
                        ) : null
                      })}
                  {!(barlevecurrent === 1 || barlevecurrent === 2) && (
                    <View className="tags">
                      {getsettlementMethodNameShort(data.settlementMethod)}
                    </View>
                  )}
                  <View className="tags">{data.category}</View>
                </View>
                {showDate && <View className="btmright">{data.date}</View>}
              </View>
            </View>
          </Button>
        </Form>
      </View>
    )
  }
}

JobListItem.defaultProps = {
  data: {}
}

export default JobListItem
